<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <button class="btn">switch</button>
    <p>
        <a href="https://www.baidu.com" target="_self">
            <img width="400px"  src="../images/1.png" alt="">
        </a>
    </p>
</body>
<script>

    /* 
        元素节点的属性 (元素节点的内置属性和方法 => 官方定义)
        (1) 元素节点也是一个对象类型的数据(引用类型),  有自己的属性和方法
        (2) 每个元素节点都是一个特殊的对象,官方给每个元素内置的属性和方法

        元素节点的属性(元素的内置属性)   => 通用
            Element.parentElement
            Element.children
            Element.previousElementSibling
            Element.nextElementSibling

            Element.innerHTML
            Element.innerText
            Element.textContent
            Element.outerHTML
            
            Element.id
            Element.className
            Element.classList  (add remove replace contains toggle(没有就新增, 有就删除) forEach)
            Element.title

            Element.dataset

            Element.style
            window.getComputedStyle(ele)  传入一个元素,返回该元素的css样式声明的对象(内部 外部 内联 默认)

        
        元素节点的属性(元素的内置属性)   => 某些元素独有的

            href  获取和设置元素href属性 (a link)
            target 获取和设置元素href属性 (a)
            src  获取和设置元素src属性(img script)
            alt  获取和设置元素alt属性(img)

            width/height 获取和设置元素的宽高(img table canvas)


        


            



        元素节点的方法
            Element.setAttribute(key,value)
            Element.getAttribute(key)
            Element.removeAttribute(key)
    
    */

    var btn = document.getElementsByClassName("btn")[0];
    var a = document.getElementsByTagName("a")[0];
    var img = document.getElementsByTagName("img")[0];

    btn.onclick = function(){
        // 取值 
        console.log(a.href);
        console.log(a.target);
        console.log(img.src);
        console.log(img.alt);
        console.log(img.width);
        console.log(img.height);

        // 赋值
        a.href = "https://www.jd.com";
        a.target = "_blank";
        img.src = "../images/2.webp";
        img.width = 600;
    }

    






</script>

</html>